<template>
<view class="category">
	<view class="header">
		<view class="search">
			商品搜索
		</view>
	<!-- 内容区域 -->
	<view class="content">
				<view class="left">
					<scroll-view class="navScroll" scroll-y="true">
						<!-- <view class="navItem active">居家111</view> -->
						<view class="navItem" :class="{active:index===navIndex}" @click="changeIndex(index)" v-for="(item,index) in categoryDatas" :key="item.id">{{ item.name }}</view>
					</scroll-view>
				</view>
				<view class="right">
					<scroll-view class="contentScroll" scroll-y="true">
						<image class="cateImg" :src="cateObj.imgUrl" mode=""></image>
											<!-- 列表 -->
						<view class="goodsList">
							<view class="goodsItem" v-for="item in cateObj.subCateList" :key="item.id">
								<image class="goodsImg" :src="item.wapBannerUrl" mode=""></image>
								<view class="goodsName">{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
	</view>
</view>
</template>

<script>
	import request from '../../utils/request.js';
	export default{
		data(){
			return {
				categoryDatas: [],
				navIndex:0
			}
		},
		// 动态计算高度
		mounted(){
			this.getCategory()
		},
		// 计算属性
		computed:{
		cateObj(){
			return this.categoryDatas[this.navIndex]
		}	
		},
		methods: {
				async getCategory() {
					const res = await request('/getCategoryData');
					console.log(res);
					this.categoryDatas = res.categoryDatas;
				},
				changeIndex(index){
					this.navIndex=index
				}
			}
	}
</script>

<style lang="stylus">
.category
	.header
		padding: 20rpx 0
		.search
			width 90%
			height: 60rpx
			margin: 0 auto
			line-height: 60rpx
			text-align: center
			font-size 30rpx
			background-color #ddd
			border-radius 4rpx
	.content
		display flex
		height 800prx
		border-top 2rpx solid #333
		height calc(100vh - 102rpx)
		.left
			width 20%
			height 800rpx
			border-right 2rpx solid #333
			.navScroll
				height calc(100vh - 102rpx)
				.navItem
					position: relative
					height 60rpx
					line-height 60rpx
					font-size 27rpx
					text-align center
					&.active::before
						content:''
						position: absolute
						width 2rpx
						height 40rpx
						background-color red
						left 10rpx
						top 10rpx
		.right
			width 80%
			height 800rpx
			.contentScroll
				height 100%
				.cateImg
					width: 520rpx
					height: 200rpx
					display: block
					margin: 10rpx auto
				.goodsList
					display: flex
					flex-wrap: wrap
					.goodsItem
						width: 33.33%
						height: 200rpx
						text-align: center
						.goodsImg
							width: 90%
							height: 140rpx
						.goodsName
							font-size: 24rpx
</style>